<template>
  <div>
    <div class="qrform">
      <!--筛选条件-->
      <el-form ref="form :model=form" label-width="80px" label-position="left">
        <el-form-item label="科目">
          <el-checkbox v-for="s in $store.state.subjects" v-model="s.checked" :key="s.id">{{ s.km }}</el-checkbox>
        </el-form-item>
        <el-form-item label="起止日期">
          <el-date-picker
            v-model="form.value"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <!--查询按钮-->
      <el-button
        type="primary" plain
        class="search"
        @click="query(1,page.size)">查询
      </el-button>
    </div>
    <!--表头-->
    <el-table
      v-show="page.showData"
      :data="records"
      class="table"
      border
      :header-cell-style="{textAlign: 'center'}"
      @row-click="showUpdate($event)"
      style="width: 80%">
      <!--      序号-->
      <el-table-column
        width="80"
        align="center"
        label="序号">
        <template slot-scope="scope">
          {{ (page.current - 1) * page.size + scope.$index + 1 }}
        </template>
      </el-table-column>
      <!--      其他表头-->
      <el-table-column
        align="center"
        v-for="h in headers" :key="h.prop"
        :prop="h.prop"
        :label="h.label">
        <template slot-scope="scope">
          <div v-if="h.prop === 'duration'">
            <span v-html="scope.row[scope.column.property] + '分钟'"></span>
          </div>
          <div v-else>
            {{ scope.row[scope.column.property] }}
          </div>
        </template>
      </el-table-column>
      <!--      编辑操作-->
      <el-table-column
        width="80"
        align="center"
        fixed="right"
        label="编辑">
        <el-link
          type="primary" plain
          @click="form.dialogFormVisible=true"
          :underline="false">编辑
        </el-link>
        <el-dialog title="修改备注及设置完成" :visible.sync="form.dialogFormVisible" :append-to-body="true">
          <el-form :model="form" style="width: 80%">
            <el-form-item label="备注">
              <el-input v-model="$store.state.finishUpdate.bz" type="textarea" autosize
                        @input="form.inputChanged = true"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="updateFinish">确认修改</el-button>
          </div>
        </el-dialog>
      </el-table-column>
    </el-table>
    <!--    页码器-->
    <el-pagination
      v-show="page.showData"
      :current-page="page.current"
      :page-sizes="page.sizes"
      :page-size="page.size"
      @size-change="sizeChange"
      @current-change="currentChange"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
  </div>
</template>

<script>
import {recordGetList, recordUpdate} from "../util/request/record";
import {formatTimeDefault} from "../util/date_format_util";
import {message} from "../util/message";
import moment from "moment";

export default {
  name: "query",
  data() {
    return {
      form: {
        value: [moment().startOf('days'), moment().endOf('days')],
        dialogTableVisible: false,
        dialogFormVisible: false,
        inputChanged: false
      },

      headers: [
        {prop: 'km', label: '科目'},
        {prop: 'kssj', label: '开始时间'},
        {prop: 'jssj', label: '结束时间'},
        {prop: 'duration', label: '学习时长'},
        {prop: 'bz', label: '备注'},
      ],
      page: {
        showData: false,
        size: 10,//页大小
        total: 0,
        current: 1,
        sizes: [10, 20, 30, 40, 50]
      },
      records: [],
    }
  },
  mounted() {
    this.$store.dispatch('initSubjects')
  },
  methods: {
    query(pageNum, pageSize) {
      this.page.current = pageNum
      recordGetList({
        kssj: formatTimeDefault(this.form.value[0]),
        jssj: formatTimeDefault(this.form.value[1]),
        km: this.$store.state.subjects.filter(item => item.checked)
          .map(item => item.km).join(),
        pageNum, offset: pageSize
      }).then(res => {
        let data = res.data
        this.records = data.data.list
        this.page.size = data.data.pageSize
        this.page.total = data.data.total
        this.$message(message(data.success, data.msg))
        this.page.showData = data.success
      })
    },
    updateFinish() {
      if (this.form.inputChanged) {
        this.form.dialogFormVisible = false
        let id = this.$store.state.finishUpdate.id
        let bz = this.$store.state.finishUpdate.bz
        recordUpdate({
          bz, id
        }).then(res => {
          let success = res.data.success
          this.$message(message(success, res.data.msg))
          let index = this.records.indexOf(this.records.find(item => item.id === id))
          this.records[index].bz = res.data.data.bz
          this.records[index].jssj = res.data.data.jssj
          this.records[index].duration = res.data.data.duration
          this.form.inputChanged = false
        })
      } else {
        this.$message(message(false, '没有做任何修改哦'))
      }
    },
    showUpdate(event) {
      this.$bus.$emit('setFinishUpdate', {id: event.id, bz: event.bz})
    },

    sizeChange(val) {
      this.query(1, val)
    },
    currentChange(val) {
      this.page.current = val
      this.query(val, this.page.size)
    },
  }
}
</script>

<style scoped>
.el-form {
  width: 40%;
  margin: 0 auto;
}


.finish_button {
  position: relative;
  width: 40%;
  left: 30%;
}

.el-dialog__body {
  padding: 10px 30px 0;
}

.el-table {
  margin-top: 3%;
}
</style>
